<template>
    <modal name="img-modal"
           :width="1400"
           height="auto"
           :clickToClose="true"
           @before-close="handleHide">
        <div slot="top-right">
            <button @click="hide">
                <i class="el-icon-circle-close" style="z-index: 9"></i>
            </button>
        </div>
        <div style="background-color: black">
            <div class="imgbox" @mousewheel="bagimg($event)">
                <img
                        class="img"
                        border="0"
                        :src="query"
                />
            </div>

            <div class="imgbox" @mousewheel="bagimg($event)">
                <img
                        v-if="cover"
                        class="img"
                        border="0"
                        :src="query"
                        style="position: absolute"
                />
                <img class="img" v-if="opType===4||opType===3" :src="result" alt="Split Image" :style="{position: 'absolute',opacity: opacity/100}" />
                <span v-else class="result-image img" :style="{WebkitMask: 'url(' + result + ') no-repeat', backgroundColor: color}"></span>
            </div>
        </div>
    </modal>

</template>

<script>
    export default {
        name: "ImgDialog",
        data() {
            return {
                params: {
                    zoomVal: 1,
                    left: 0,
                    top: 0,
                    currentX: 0,
                    currentY: 0,
                    flag: false,
                },
                opacity:100,
                opType:1,
                cover:false,
                query:'',
                result:'',
                color:'rgba(255, 255, 255, 1)'
            };
        },
        mounted() {
        },
        methods: {
            show () {
                this.$modal.show('img-modal');
                // document.body.style.position='fixed';
                document.documentElement.style.overflowY = 'hidden'
                let that = this
                setTimeout(function() {
                    let imgs = document.querySelectorAll(".img")
                    that.startDrag(imgs, imgs);
                }, 100)
            },
            handleHide() {
                document.documentElement.style.overflowY = 'auto'
            },
            hide () {      
                this.$modal.hide('img-modal');
                // document.body.style.position='static';
            },
            bagimg(e) {
                let imgs = document.querySelectorAll(".img");
                this.params.zoomVal += e.wheelDelta / 2000;
                let minZoom = 0.2;
                let maxZoom = 10;
                if (this.params.zoomVal >= minZoom && this.params.zoomVal <= maxZoom) {
                    for (let img of imgs) {
                        img.style.transform = "scale(" + this.params.zoomVal + ")"
                    }
                } else {
                    if (this.params.zoomVal < minZoom) this.params.zoomVal = minZoom;
                    else this.params.zoomVal = maxZoom;
                    for (let img of imgs) {
                        img.style.transform = "scale(" + this.params.zoomVal + ")";
                    }
                    return false;
                }
            },
            getImgCss(e, key) {
                return e.currentStyle
                    ? e.currentStyle[key]
                    : document.defaultView.getComputedStyle(e, false)[key];
            },
            startDrag(bars, targets, callback) {
                let that = this;
                for (let i = 0; i < targets.length; i++) {
                    if (that.getImgCss(targets[i], "left") !== "auto") {
                        that.params.left = that.getImgCss(targets[i], "left");
                    }
                    if (that.getImgCss(targets[i], "top") !== "auto") {
                        that.params.top = that.getImgCss(targets[i], "top");
                    }
                }
                for (let bar of bars) {
                    bar.onmousedown = function (event) {
                        that.params.flag = true;
                        let e = event;
                        that.params.currentX = e.clientX;
                        that.params.currentY = e.clientY;
                    };
                }
                document.onmouseup = function () {
                    that.params.flag = false;
                    for (let i = 0; i < targets.length; i++) {
                        if (that.getImgCss(targets[i], "left") !== "auto") {
                            that.params.left = that.getImgCss(targets[i], "left");
                        }
                        if (that.getImgCss(targets[i], "top") !== "auto") {
                            that.params.top = that.getImgCss(targets[i], "top");
                        }
                    }
                };
                document.onmousemove = function (event) {
                    let e = event ? event : window.event;
                    if (that.params.flag) {
                        let nowX = e.clientX,
                            nowY = e.clientY;
                        let disX = nowX - that.params.currentX,
                            disY = nowY - that.params.currentY;
                        for (let i = 0; i < targets.length; i++) {
                            targets[i].style.left = parseInt(that.params.left) + disX + "px";
                            targets[i].style.top = parseInt(that.params.top) + disY + "px";
                        }
                        return false;
                    }
                };
            },
        },
    }
</script>

<style scoped>
    .imgbox {
        position: relative;
        display: inline-block;
        border: 2px solid black;
        width: 600px;
        height: 600px;
        margin: 30px 30px;
        overflow: hidden;
    }

    img {
        position: absolute;
        /* width: 700px; */
        height: 100%;
        width: auto;
        cursor: move;
    }
    .result-image {
        mask-position: unset !important;
    }
</style>